import * as echarts from "echarts";

const barItemStyle = {
  normal: {
    color: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [
        {
          offset: 0,
          color: "rgba(0,244,255,1)", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "rgba(0,77,167,1)", // 100% 处的颜色
        },
      ],
      false
    ),
    barBorderRadius: [20, 20, 20, 20],
    shadowColor: "rgba(0,160,221,1)",
    shadowBlur: 4,
  },
};

const textStyleCommon = {
  color: "#000", // 自定义文字颜色
  fontSize: 14, // 自定义文字大小
  fontFamily: "cursive",
};

const toolips = {
  trigger: "axis",
  backgroundColor: "#fff", // 自定义背景颜色
  borderColor: "#bf0000", // 自定义边框颜色
  textStyle: {
    color: "#000", // 自定义文字颜色
    fontSize: 14, // 自定义文字大小
    fontFamily: "cursive",
  },
};
const legend = {
  textStyle: {
    fontSize: 14,
  },
  show: true,
  top: "20",
};
const lineSeries = {
  type: "line",
  smooth: true,
  showSymbol: false,
  // 设置不显示圆点
  itemStyle: { opacity: 0 },
  lineStyle: {
    width: 2, // 设置图例线条的宽度
  },
};
const xAxis = {
  type: "category",
  boundaryGap: true,
  data: [],
  axisTick: {
    show: false,
  },
  axisLabel: {
    interval: 0, //设置文本标签全部显示
    fontSize: 12,
    rotate: 20, //如果内容重叠最好设置一下旋转，就不会重叠了
  },
  axisLine: {
    show: false,
  },
};
const yAxisLocal = {
  type: "value",
  axisTick: {
    show: false,
  },
  axisLabel: {
    fontSize: 12,
  },
  axisLine: {
    show: false,
  },
  splitLine: {
    show: true,
    lineStyle: {
      type: "dashed",
    },
  },
  nameTextStyle: {
    fontSize: 9,
  },
};
const grid = {
  top: 20,
  left: 20,
  right: 10,
  bottom: 10,
  show: true,
  borderColor: "transparent",
  borderWidth: 0.5,
  containLabel: true,
};
export default {
  legend: legend,
  toolips: toolips,
  grid: grid,
  xAxis: xAxis,
  yAxis: yAxisLocal,
  lineSeries: lineSeries,
  barItemStyle,
};
// 支持5.1有间隔的，更简练
export const getPie = ({
  el,
  tooltips = {},
  data,
  title = "总资产",
  radius = ["65%", "75% "],
  center = ["50%", "55%"],
  length = 20,
  length2 = 50,
  padAngle = 5,
  unit = "元",
}) => {
  if (!el || !echarts || !data || data.length <= 0) {
    return;
  }
  let myChart = echarts.init(el);
  let total = 0;
  for (let i in data) {
    total += data[i].value;
  }
  let rich = {
    white: {
      align: "center",
      padding: [3, 0],
    },
  };

  let func = (params) => {
    let percent = ((params.value / total) * 100).toFixed(2);
    let name = params.name.replace(/\n/g, "");
    if (params.name !== "") {
      return name + ":" + params.value + unit + "\n{white|" + percent + "%}";
    } else {
      return "";
    }
  };
  const option = {
    backgroundColor: "transparent",
    textStyle: textStyleCommon,
    title: {
      text: total + unit,
      subtext: title,
      left: "center",
      top: "center",
      padding: [2, 0],
      textStyle: {
        color: "#000",
        fontSize: 20,
        align: "center",
      },
      subtextStyle: {
        top: 16,
        padding: [2, 0],
        color: "#000",
      },
    },
    tooltip: {
      ...toolips,
      trigger: "item",
      formatter: (data) => {
        return `${data.marker}${data.name}：  ${data.value}  (${data.percent}%)`;
      },
      ...tooltips,
    },
    series: [
      {
        type: "pie",
        radius: radius,
        avoidLabelOverlap: false,
        center: center,
        padAngle: padAngle, // 间隔角度
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "outside",
              formatter: func,
              rich: rich,
            },
            labelLine: {
              length: length,
              length2: length2,
              show: true,
              color: "#00ffff",
            },
          },
        },
        data,
        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function (idx) {
          return idx * 50;
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

export const getLine = ({
  el,
  data,
  xData,
  axisLabel,
  yAxis,
  tooltipFormatter,
  rotate = 90,
  legendMerge = { show: true },
  gridMerge = {},
}) => {
  let myChart = echarts.init(el);
  let names = data.map((item) => item.name);
  let tooltip = {
    trigger: "axis",
    ...toolips,
  };
  if (tooltipFormatter) {
    tooltip.formatter = tooltipFormatter;
  }
  let series = data.map((item) => ({
    ...lineSeries,
    name: item.name,
    data: item.value,
    yAxisIndex: item.yAxisIndex ? item.yAxisIndex : 0,
  }));
  const option = {
    textStyle: textStyleCommon,
    tooltip: tooltip,
    legend: {
      ...legend,
      top: -1,
      data: names,
      ...legendMerge,
    },
    grid: {
      ...grid,
      top: 40,
      ...gridMerge,
    },
    xAxis: {
      ...xAxis,
      boundaryGap: false,
      axisLabel: {
        fontSize: 12,
        rotate: rotate,
      },
      ...axisLabel,
      data: xData,
    },
    yAxis: yAxis ? yAxis : yAxisLocal,
    series: series,
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
